<template>
  <div class="container" :class="iPhoneX&&'iPhoneX'">
    <scroll-view :scroll-y="true" style="height: 100%">
      <div class="main">
        <div class="header">
          <!-- 支付状态 -->
          <div class="status">
            <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/clock.png'" alt />
            <span>{{order_status==1&&'待支付'||order_status==2&&'待发货'||order_status==3&&'待收货'||order_status==4&&'待评价'||order_status==5&&'已完成'||order_status==6&&'待退款'||order_status==7&&'已退款'||order_status==8&&'已取消'||order_status==9&&'客服介入'||order_status==10&&'待尾款支付'||order_status==11&&'尾款待支付'||order_status==12&&'订单已超时'||order_status==13&&'退款异常'||''}}</span>
          </div>
        </div>
        <div class="cardcoupon">
          <!-- 卡 -->
          <card v-if="goods_type==1" :data="obj"></card>
          <!-- 券 -->
          <coupon v-if="goods_type==2" :data="obj"></coupon>
        </div>
        <!-- 退款原因 -->
        <div class="refundreason">
          <div class="lf">退款原因</div>
          <div class="rt" @click="refundShow=true">
            <span>{{return_reason}}</span>
            <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/rightarrow.png'" alt />
          </div>
        </div>
        <!-- 退款金额 -->
        <div class="refundprice">
          <div class="top">
            <div class="lf">退款金额</div>
            <div class="rt">￥{{return_price}}</div>
          </div>
          <div class="bottom">(退款最多¥{{return_price}}，含优惠折扣费用)</div>
        </div>
        <!-- 退款说明 -->
        <div class="refundexplain">
          <div class="top">
            退款说明
            <span class="detail">（请说出您实际购买的情况说明 限300字）</span>
          </div>
          <textarea class="center" v-model="return_remark" maxlength="300" />
          <div class="bottom clearfix">
            <div class="picitem" v-for="(item,index) in return_images" :key="index">
              <img
                class="closebtn"
                v-if="ossUrl"
                :src="ossUrl+'/mp_3.2.4/close@2x.png'"
                @click="delImg(index)"
                alt
              />
              <img :src="imgUrl+item" alt />
            </div>
            <div class="uploadbtn" v-if="return_images.length<3" @click="chooseImage">
              <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/photo.png'" alt />
              <div class="uptext">上传图片</div>
              <div class="picnum">{{return_images.length}}/3</div>
            </div>
          </div>
        </div>
        <!-- 联系电话 -->
        <div class="contactphone">
          <div class="lf">联系电话</div>
          <input
            v-model="phone"
            class="rt"
            type="number"
            maxlength="11"
            placeholder="请输入您的联系电话方便客服联系您"
            :djust-position="false"
          />
        </div>
      </div>
    </scroll-view>
    <!-- 底部 -->
    <div class="footer" :style="{height:(iPhoneX?166:106)+'rpx'}">
      <div class="btn" @click="confirmSubmit">确认提交</div>
    </div>
    <!-- 退款原因 -->
    <div class="refund-mask" :class="refundShow&&'refund-show'" @click="closeRefund">
      <div class="reason" :class="iPhoneX&&'iphonex-padding'" @click.stop>
        <div class="title">退款原因</div>
        <div class="reasonlist">
          <div class="item" v-for="(item,i) in array" :key="i" @click="checked(item,i)">
            <div>{{item}}</div>
            <div class="checkbox">
              <img
                v-if="ossUrl"
                :src="ossUrl+(checkedNum===i?'/mp_3.2.4/check_y.png':'/mp_3.2.4/check_n.png')"
                alt
              />
            </div>
          </div>
        </div>
        <div class="close" @click="closeRefund">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import card from "@/components/card/index";
import coupon from "@/components/coupon/index";
import delPhoto from "@/assets/js/delPhoto.js";
export default {
  components: {
    card,
    coupon
  },
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      imgUrl: common.image_response, //http图片
      iPhoneX: false, //是否是iPhoneX
      array: ["不想要了", "支付方式使用错误", "购买错误", "其他"],
      return_reason: "请选择", //退款原因
      checkedNum: "", //退款原因选中项
      refundShow: false, //退款原因弹窗
      return_remark: "", //退款说明
      return_images: [], //退款图片
      phone: "", //联系方式
      order_id: "", //订单id
      order_status: "", //订单状态
      goods_type: "", //商品类型 1：卡 2：券
      obj: {}, //传入卡/券组件数据
      return_price: 0 //退款金额
    };
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data());
    // 设置导航栏标题
    wx.setNavigationBarTitle({
      title: "申请退款"
    });
    //获取系统信息
    let that = this;
    wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        if (res.model.search("iPhone X") != -1) {
          that.iPhoneX = true;
        }
      }
    });
    // 获取参数 71
    this.order_id = options.order_id || "";
    // 获取退款信息
    this.getDetail();
  },
  methods: {
    // 获取详情
    getDetail() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/market_order/orderDetail",
        {
          order_id: this.order_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            console.log(res);
            this.order_status = res.data.order_status || "";
            this.goods_type = res.data.goods_type || "";
            this.obj = {
              sign: res.data.goods_sign || "",
              name: res.data.goods_name || "",
              desc: res.data.goods_describe || "",
              price: res.data.goods_price || 0,
              min_sale_price: res.data.goods_min_sale_price || 0,
              goods_image: res.data.goods_image || "",
              sale: res.data.goods_sale_count || 0,
              goods_deduction_type:res.data.goods_deduction_type||0
            };
            this.return_price = res.data.return_price || 0;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 选中退款原因
    checked(val, index) {
      this.return_reason = val;
      this.checkedNum = index;
    },
    // 关闭退款原因弹窗
    closeRefund() {
      this.refundShow = false;
    },
    // 上传图片
    chooseImage() {
      let that = this;
      wx.chooseImage({
        count: 3 - that.return_images.length,
        sizeType: ["compressed"],
        success(res) {
          wx.showLoading({
            title: "上传中...",
            mask: true
          });
          res.tempFilePaths.forEach(item => {
            wx.uploadFile({
              url: common.base_url + "api/v4_5/upload",
              filePath: item,
              name: "file",
              formData: {
                dirPath: "authentication",
                upload_status: true
              },
              header: {},
              success: res => {
                wx.hideLoading();
                let result = JSON.parse(res.data);
                wx.showToast({
                  title: "图片上传成功",
                  icon: "none",
                  duration: 2000,
                  mask: false
                });
                let arr = [...that.return_images];
                arr.push(result.data.url);
                that.return_images = arr;
              },
              fail: () => {
                wx.hideLoading();
                wx.showToast({
                  title: "图片上传失败",
                  icon: "none",
                  duration: 2000,
                  mask: true
                });
              }
            });
          });
        },
        fail() {
          wx.hideLoading();
          wx.showToast({
            title: "图片选取失败",
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      });
    },
    //  删除图片
    delImg(index) {
      let that = this;
      delPhoto(this.return_images[index]);
      let arr = [...that.return_images];
      arr.splice(index, 1);
      that.return_images = arr;
    },
    // 确认提交
    confirmSubmit() {
      if (!this.return_reason || this.return_reason == "请选择") {
        common.mmk_Loading(2, "请选择退款原因");
        return;
      } else if (!this.return_remark) {
        common.mmk_Loading(2, "请输入退款说明");
        return;
      } else if (!this.return_images[0]) {
        common.mmk_Loading(2, "请上传图片");
        return;
      } else if (!this.phone) {
        common.mmk_Loading(2, "请输入您的联系电话");
        return;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/market_order/applyReturn",
        {
          order_id: this.order_id,
          return_reason: this.return_reason,
          return_remark: this.return_remark,
          return_images: this.return_images.join(",") || "",
          phone: this.phone
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            wx.redirectTo({
              url: "/pages/ct_store/card_ticket_order/main"
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.Box {
  margin: 0 10px 10px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  box-sizing: border-box;
}
.lfTitle {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
}
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .main {
    padding-bottom: 63px;
    .header {
      padding: 12px 0;
      background: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 10px 10px;
      .status {
        margin: 0 20px;
        padding: 8px 20px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(249, 112, 77, 1);
        line-height: 16px;
        background: linear-gradient(
          270deg,
          rgba(249, 112, 77, 0) 0%,
          rgba(249, 112, 77, 0.12) 100%
        );
        border-radius: 19px;
        img {
          width: 14px;
          height: 13px;
          vertical-align: -1px;
          margin-right: 2px;
        }
      }
    }
    // card详情/券详情
    .cardcoupon {
      padding: 12px;
      box-sizing: border-box;
    }
    //   退款原因
    .refundreason {
      .Box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .lf {
        .lfTitle;
      }
      .rt {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        img {
          width: 8px;
          height: 13px;
          margin-left: 8px;
          vertical-align: -2px;
        }
      }
    }
    //   退款金额
    .refundprice {
      .Box;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        .lf {
          .lfTitle;
        }
        .rt {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 92, 92, 1);
          line-height: 16px;
        }
      }
      .bottom {
        text-align: right;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
      }
    }
    //   退款说明
    .refundexplain {
      .Box;
      .lfTitle;
      .detail {
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 14px;
      }
      .center {
        margin-top: 12px;
        width: 100%;
        height: 90px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .bottom {
        .picitem {
          float: left;
          margin-right: 16px;
          width: 88px;
          height: 88px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .closebtn {
            width: 14px;
            height: 14px;
            position: absolute;
            top: -8px;
            right: -5px;
          }
        }
        .uploadbtn {
          width: 88px;
          height: 88px;
          background: rgba(250, 251, 252, 1);
          border-radius: 5px;
          border: 1px dotted rgba(217, 217, 217, 1);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          img {
            width: 33px;
            height: 27px;
            margin-bottom: 5px;
          }
          .uptext,
          .picnum {
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 14px;
          }
          .picnum {
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
    //   联系电话
    .contactphone {
      .Box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .lf {
        .lfTitle;
      }
      .rt {
        flex: 1;
        height: 100%;
        text-align: right;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
    }
  }
  // 确认提交
  .footer {
    width: 100%;
    height: 53px;
    padding: 5px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    .btn {
      float: right;
      padding: 9px 25px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 100px;
      box-sizing: border-box;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
  // 退款原因弹窗
  .refund-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99996;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    .reason {
      background: rgba(255, 255, 255, 1);
      width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      border-radius: 10px 10px 0px 0px;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      opacity: 1;
      box-sizing: border-box;
      .title {
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        padding: 15px 0;
        box-sizing: border-box;
      }
      .reasonlist {
        padding: 16px 16px 0;
        box-sizing: border-box;
        .item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin-bottom: 20px;
          box-sizing: border-box;
          .checkbox {
            width: 16px;
            height: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .close {
        height: 38px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 38px;
      }
      &.iphonex-padding {
        padding-bottom: 34px;
      }
    }
  }
  .refund-show {
    opacity: 1;
    visibility: visible;
  }
}
.iPhoneX {
  padding-bottom: 93px;
}
</style>